<template>
  <div class="permission-management">
    <!-- 页面标题和操作栏 -->
    <div class="page-header">
      <div class="header-left">
        <h2 class="page-title">
          <i class="el-icon-key"></i>
          权限管理
        </h2>
        <span class="page-subtitle">管理系统权限点和菜单配置</span>
      </div>
      <div class="header-actions">
        <el-button 
          type="primary" 
          icon="el-icon-plus" 
          @click="handleAdd" 
          v-if="hasPermission('system:permission:add')"
          size="medium"
        >
          新增权限
        </el-button>
        <el-button 
          icon="el-icon-download" 
          @click="handleExport" 
          v-if="hasPermission('system:permission:export')"
          size="medium"
        >
          导出数据
        </el-button>
        <el-button 
          icon="el-icon-refresh" 
          @click="loadData"
          :loading="loading"
          size="medium"
        >
          刷新
        </el-button>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <el-card shadow="never" class="search-card">
        <el-form :model="searchForm" :inline="true" class="search-form">
          <el-form-item label="权限名称">
            <el-input
              v-model="searchForm.permissionName"
              placeholder="请输入权限名称"
              clearable
              prefix-icon="el-icon-search"
              @keyup.enter.native="handleSearch"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="权限类型">
            <el-select 
              v-model="searchForm.permissionType" 
              placeholder="请选择权限类型" 
              clearable
              style="width: 150px"
            >
              <el-option label="菜单权限" value="menu" />
              <el-option label="操作权限" value="operation" />
              <el-option label="数据权限" value="data" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select 
              v-model="searchForm.status" 
              placeholder="请选择状态" 
              clearable
              style="width: 120px"
            >
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">
              搜索
            </el-button>
            <el-button icon="el-icon-refresh" @click="handleReset">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-section">
      <el-card shadow="never" class="table-card">
        <!-- 表格工具栏 -->
        <div class="table-toolbar">
          <div class="toolbar-left">
            <span class="table-title">权限列表</span>
            <el-tag v-if="selectedRows.length > 0" type="info" size="small">
              已选择 {{ selectedRows.length }} 项
            </el-tag>
          </div>
          <div class="toolbar-right">
            <el-button 
              size="small" 
              icon="el-icon-view" 
              @click="showPermissionTree = !showPermissionTree"
            >
              {{ showPermissionTree ? '列表视图' : '树形视图' }}
            </el-button>
          </div>
        </div>

        <!-- 树形视图 -->
        <div v-if="showPermissionTree" class="tree-view">
          <el-tree
            :data="permissionTreeData"
            :props="treeProps"
            node-key="id"
            :expand-on-click-node="false"
            :default-expand-all="true"
            class="permission-tree"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span class="tree-node-label">
                <i :class="getPermissionIcon(data.permissionType)"></i>
                {{ data.permissionName }}
                <el-tag 
                  :type="data.status === 1 ? 'success' : 'danger'" 
                  size="mini" 
                  style="margin-left: 8px"
                >
                  {{ data.status === 1 ? '启用' : '禁用' }}
                </el-tag>
                <el-tag 
                  :type="getPermissionTypeColor(data.permissionType)" 
                  size="mini" 
                  style="margin-left: 4px"
                >
                  {{ getPermissionTypeText(data.permissionType) }}
                </el-tag>
              </span>
              <span class="tree-node-actions">
                <el-button 
                  size="mini" 
                  type="text" 
                  icon="el-icon-view"
                  @click="handleView(data)"
                  v-if="hasPermission('system:permission:list')"
                >
                  查看
                </el-button>
                <el-button 
                  size="mini" 
                  type="text" 
                  icon="el-icon-edit"
                  @click="handleEdit(data)"
                  v-if="hasPermission('system:permission:edit')"
                >
                  编辑
                </el-button>
                <el-button 
                  size="mini" 
                  type="text" 
                  icon="el-icon-plus"
                  @click="handleAddChild(data)"
                  v-if="hasPermission('system:permission:add')"
                >
                  添加子权限
                </el-button>
                <el-button 
                  size="mini" 
                  type="text" 
                  icon="el-icon-delete"
                  @click="handleDelete(data)"
                  v-if="hasPermission('system:permission:delete')"
                  style="color: #f56c6c"
                >
                  删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>

        <!-- 列表视图 -->
        <div v-else>
          <!-- 数据表格 -->
          <el-table
            :data="tableData"
            v-loading="loading"
            @selection-change="handleSelectionChange"
            stripe
            border
            height="500"
            class="data-table"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="id" label="ID" width="80" align="center" />
            <el-table-column prop="permissionName" label="权限名称" width="150" show-overflow-tooltip />
            <el-table-column prop="permissionCode" label="权限编码" width="150" show-overflow-tooltip />
            <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
            <el-table-column prop="permissionType" label="权限类型" width="100" align="center">
              <template slot-scope="scope">
                <el-tag :type="getPermissionTypeColor(scope.row.permissionType)" size="small">
                  {{ getPermissionTypeText(scope.row.permissionType) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="resource" label="资源" width="120" show-overflow-tooltip />
            <el-table-column prop="operation" label="操作" width="100" show-overflow-tooltip />
            <el-table-column prop="status" label="状态" width="80" align="center">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small">
                  {{ scope.row.status === 1 ? '启用' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="sortOrder" label="排序" width="80" align="center" />
            <el-table-column prop="createTime" label="创建时间" width="160" show-overflow-tooltip />
            <el-table-column label="操作" width="200" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button 
                  size="mini" 
                  icon="el-icon-view" 
                  @click="handleView(scope.row)" 
                  v-if="hasPermission('system:permission:list')"
                  type="text"
                >
                  查看
                </el-button>
                <el-button 
                  size="mini" 
                  icon="el-icon-edit" 
                  @click="handleEdit(scope.row)" 
                  v-if="hasPermission('system:permission:edit')"
                  type="text"
                >
                  编辑
                </el-button>
                <el-button 
                  size="mini" 
                  icon="el-icon-plus" 
                  @click="handleAddChild(scope.row)" 
                  v-if="hasPermission('system:permission:add')"
                  type="text"
                >
                  添加子权限
                </el-button>
                <el-button 
                  size="mini" 
                  icon="el-icon-delete" 
                  @click="handleDelete(scope.row)" 
                  v-if="hasPermission('system:permission:delete')"
                  type="text"
                  style="color: #f56c6c"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagination.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pagination.size"
              :total="pagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              background
            />
          </div>
        </div>
      </el-card>
    </div>

    <!-- 批量操作 -->
    <div class="batch-actions" v-if="selectedRows.length > 0">
      <el-card shadow="never" class="batch-card">
        <div class="batch-content">
          <span class="batch-info">
            <i class="el-icon-info"></i>
            已选择 {{ selectedRows.length }} 个权限
          </span>
          <div class="batch-buttons">
            <el-button 
              type="success" 
              icon="el-icon-check" 
              @click="handleBatchEnable" 
              v-if="hasPermission('system:permission:edit')"
              size="small"
            >
              批量启用
            </el-button>
            <el-button 
              type="warning" 
              icon="el-icon-close" 
              @click="handleBatchDisable" 
              v-if="hasPermission('system:permission:edit')"
              size="small"
            >
              批量禁用
            </el-button>
            <el-button 
              type="danger" 
              icon="el-icon-delete" 
              @click="handleBatchDelete" 
              v-if="hasPermission('system:permission:delete')"
              size="small"
            >
              批量删除
            </el-button>
            <el-button 
              icon="el-icon-close" 
              @click="selectedRows = []"
              size="small"
            >
              取消选择
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="600px"
      @close="handleDialogClose"
      class="permission-dialog"
    >
      <el-form
        :model="formData"
        :rules="formRules"
        ref="form"
        label-width="100px"
      >
        <el-form-item label="权限编码" prop="permissionCode">
          <el-input v-model="formData.permissionCode" :disabled="isEdit" />
        </el-form-item>
        <el-form-item label="权限名称" prop="permissionName">
          <el-input v-model="formData.permissionName" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="formData.description" type="textarea" :rows="3" />
        </el-form-item>
        <el-form-item label="权限类型" prop="permissionType">
          <el-select v-model="formData.permissionType">
            <el-option label="菜单权限" value="menu" />
            <el-option label="操作权限" value="operation" />
            <el-option label="数据权限" value="data" />
          </el-select>
        </el-form-item>
        <el-form-item label="资源" prop="resource">
          <el-input v-model="formData.resource" placeholder="如：user, role, permission" />
        </el-form-item>
        <el-form-item label="操作" prop="operation">
          <el-input v-model="formData.operation" placeholder="如：add, edit, delete, list" />
        </el-form-item>
        <el-form-item label="父权限" prop="parentId">
          <el-select v-model="formData.parentId" placeholder="请选择父权限" clearable>
            <el-option
              v-for="permission in parentPermissionOptions"
              :key="permission.id"
              :label="permission.permissionName"
              :value="permission.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sortOrder">
          <el-input-number v-model="formData.sortOrder" :min="0" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="formData.status">
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单路径" prop="menuPath" v-if="formData.permissionType === 'menu'">
          <el-input v-model="formData.menuPath" placeholder="如：/system/user" />
        </el-form-item>
        <el-form-item label="菜单图标" prop="menuIcon" v-if="formData.permissionType === 'menu'">
          <el-input v-model="formData.menuIcon" placeholder="如：el-icon-user" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>

    <!-- 权限详情对话框 -->
    <el-dialog
      title="权限详情"
      :visible.sync="detailDialogVisible"
      width="600px"
      class="permission-dialog"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="权限编码">{{ currentPermission.permissionCode }}</el-descriptions-item>
        <el-descriptions-item label="权限名称">{{ currentPermission.permissionName }}</el-descriptions-item>
        <el-descriptions-item label="描述">{{ currentPermission.description }}</el-descriptions-item>
        <el-descriptions-item label="权限类型">
          <el-tag :type="getPermissionTypeColor(currentPermission.permissionType)">
            {{ getPermissionTypeText(currentPermission.permissionType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="资源">{{ currentPermission.resource }}</el-descriptions-item>
        <el-descriptions-item label="操作">{{ currentPermission.operation }}</el-descriptions-item>
        <el-descriptions-item label="父权限">{{ currentPermission.parentPermissionName }}</el-descriptions-item>
        <el-descriptions-item label="排序">{{ currentPermission.sortOrder }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="currentPermission.status === 1 ? 'success' : 'danger'">
            {{ currentPermission.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ currentPermission.createTime }}</el-descriptions-item>
        <el-descriptions-item label="菜单路径" v-if="currentPermission.permissionType === 'menu'">
          {{ currentPermission.menuPath }}
        </el-descriptions-item>
        <el-descriptions-item label="菜单图标" v-if="currentPermission.permissionType === 'menu'">
          <i :class="currentPermission.menuIcon"></i> {{ currentPermission.menuIcon }}
        </el-descriptions-item>
      </el-descriptions>
      
      <div v-if="currentPermission.children && currentPermission.children.length > 0" style="margin-top: 20px;">
        <h4>子权限</h4>
        <el-tag
          v-for="child in currentPermission.children"
          :key="child.id"
          style="margin-right: 10px; margin-bottom: 10px;"
        >
          {{ child.permissionName }}
        </el-tag>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { permissionApi } from '@/api/permissionManagement'
import { permissionMixin } from '@/utils/permission'

export default {
  name: 'PermissionManagement',
  mixins: [permissionMixin],
  data() {
    return {
      loading: false,
      tableData: [],
      permissionTreeData: [],
      selectedRows: [],
      showPermissionTree: false,
      searchForm: {
        permissionName: '',
        permissionType: '',
        status: ''
      },
      pagination: {
        page: 1,
        size: 10,
        total: 0
      },
      dialogVisible: false,
      detailDialogVisible: false,
      isEdit: false,
      dialogTitle: '新增权限',
      formData: {
        permissionCode: '',
        permissionName: '',
        description: '',
        permissionType: 'operation',
        resource: '',
        operation: '',
        parentId: null,
        sortOrder: 0,
        status: 1,
        menuPath: '',
        menuIcon: ''
      },
      formRules: {
        permissionCode: [
          { required: true, message: '请输入权限编码', trigger: 'blur' }
        ],
        permissionName: [
          { required: true, message: '请输入权限名称', trigger: 'blur' }
        ],
        permissionType: [
          { required: true, message: '请选择权限类型', trigger: 'change' }
        ]
      },
      parentPermissionOptions: [],
      currentPermission: {},
      treeProps: {
        children: 'children',
        label: 'permissionName'
      }
    }
  },
  mounted() {
    this.loadData()
    this.loadParentPermissionOptions()
    this.loadPermissionTree()
  },
  methods: {
    // 加载数据
    async loadData() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.page,
          size: this.pagination.size,
          ...this.searchForm
        }
        const response = await permissionApi.getPermissions(params)
        if (response.code === 200) {
          this.tableData = response.data.content
          this.pagination.total = response.data.total
        }
      } catch (error) {
        this.$message.error('加载数据失败')
      } finally {
        this.loading = false
      }
    },

    // 加载权限树
    async loadPermissionTree() {
      try {
        const response = await permissionApi.getAllPermissionsTree()
        if (response.code === 200) {
          this.permissionTreeData = response.data
        }
      } catch (error) {
        console.error('加载权限树失败:', error)
      }
    },

    // 加载父权限选项
    async loadParentPermissionOptions() {
      try {
        const response = await permissionApi.getAllPermissionsTree()
        if (response.code === 200) {
          this.parentPermissionOptions = this.flattenPermissions(response.data)
        }
      } catch (error) {
        console.error('加载父权限选项失败:', error)
      }
    },

    // 扁平化权限树
    flattenPermissions(permissions) {
      let result = []
      permissions.forEach(permission => {
        result.push(permission)
        if (permission.children && permission.children.length > 0) {
          result = result.concat(this.flattenPermissions(permission.children))
        }
      })
      return result
    },

    // 获取权限类型图标
    getPermissionIcon(type) {
      const iconMap = {
        menu: 'el-icon-menu',
        operation: 'el-icon-setting',
        data: 'el-icon-data-line'
      }
      return iconMap[type] || 'el-icon-key'
    },

    // 获取权限类型文本
    getPermissionTypeText(type) {
      const textMap = {
        menu: '菜单权限',
        operation: '操作权限',
        data: '数据权限'
      }
      return textMap[type] || '未知'
    },

    // 获取权限类型颜色
    getPermissionTypeColor(type) {
      const colorMap = {
        menu: 'primary',
        operation: 'success',
        data: 'warning'
      }
      return colorMap[type] || 'info'
    },

    // 搜索
    handleSearch() {
      this.pagination.page = 1
      this.loadData()
    },

    // 重置搜索
    handleReset() {
      this.searchForm = {
        permissionName: '',
        permissionType: '',
        status: ''
      }
      this.pagination.page = 1
      this.loadData()
    },

    // 新增
    handleAdd() {
      this.isEdit = false
      this.dialogTitle = '新增权限'
      this.formData = {
        permissionCode: '',
        permissionName: '',
        description: '',
        permissionType: 'operation',
        resource: '',
        operation: '',
        parentId: null,
        sortOrder: 0,
        status: 1,
        menuPath: '',
        menuIcon: ''
      }
      this.dialogVisible = true
    },

    // 添加子权限
    handleAddChild(parent) {
      this.isEdit = false
      this.dialogTitle = '新增子权限'
      this.formData = {
        permissionCode: '',
        permissionName: '',
        description: '',
        permissionType: 'operation',
        resource: '',
        operation: '',
        parentId: parent.id,
        sortOrder: 0,
        status: 1,
        menuPath: '',
        menuIcon: ''
      }
      this.dialogVisible = true
    },

    // 编辑
    handleEdit(row) {
      this.isEdit = true
      this.dialogTitle = '编辑权限'
      this.formData = { ...row }
      this.dialogVisible = true
    },

    // 查看
    handleView(row) {
      this.currentPermission = row
      this.detailDialogVisible = true
    },

    // 删除
    handleDelete(row) {
      this.$confirm('确定要删除该权限吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const response = await permissionApi.deletePermission(row.id)
          if (response.code === 200) {
            this.$message.success('删除成功')
            this.loadData()
            this.loadPermissionTree()
          }
        } catch (error) {
          this.$message.error('删除失败')
        }
      })
    },

    // 导出
    handleExport() {
      this.$message.info('导出功能开发中...')
    },

    // 批量启用
    handleBatchEnable() {
      this.$message.info('批量启用功能开发中...')
    },

    // 批量禁用
    handleBatchDisable() {
      this.$message.info('批量禁用功能开发中...')
    },

    // 批量删除
    handleBatchDelete() {
      this.$message.info('批量删除功能开发中...')
    },

    // 提交表单
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            let response
            if (this.isEdit) {
              response = await permissionApi.updatePermission(this.formData.id, this.formData)
            } else {
              response = await permissionApi.createPermission(this.formData)
            }
            if (response.code === 200) {
              this.$message.success(this.isEdit ? '更新成功' : '创建成功')
              this.dialogVisible = false
              this.loadData()
              this.loadPermissionTree()
            }
          } catch (error) {
            this.$message.error(this.isEdit ? '更新失败' : '创建失败')
          }
        }
      })
    },

    // 关闭对话框
    handleDialogClose() {
      this.$refs.form.resetFields()
    },

    // 选择变化
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },

    // 分页大小变化
    handleSizeChange(size) {
      this.pagination.size = size
      this.pagination.page = 1
      this.loadData()
    },

    // 当前页变化
    handleCurrentChange(page) {
      this.pagination.page = page
      this.loadData()
    }
  }
}
</script>

<style scoped>
.permission-management {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 页面标题区域 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  flex-direction: column;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin-top: 4px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.header-actions .el-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  backdrop-filter: blur(10px);
}

.header-actions .el-button:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

/* 搜索区域 */
.search-section {
  margin-bottom: 20px;
}

.search-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-form {
  padding: 10px 0;
}

.search-form .el-form-item {
  margin-bottom: 16px;
}

/* 表格区域 */
.table-section {
  margin-bottom: 20px;
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 16px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.data-table {
  border-radius: 4px;
  overflow: hidden;
}

.data-table .el-table__header {
  background-color: #fafafa;
}

.data-table .el-table__header th {
  background-color: #fafafa !important;
  color: #606266;
  font-weight: 600;
}

/* 树形视图 */
.tree-view {
  padding: 16px 0;
}

.permission-tree {
  background: #fafafa;
  border-radius: 4px;
  padding: 16px;
}

.custom-tree-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 0;
}

.tree-node-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.tree-node-actions {
  display: flex;
  gap: 4px;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  margin-top: 16px;
  border-top: 1px solid #ebeef5;
}

/* 批量操作 */
.batch-actions {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.batch-card {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid #e4e7ed;
}

.batch-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.batch-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-size: 14px;
}

.batch-buttons {
  display: flex;
  gap: 8px;
}

/* 对话框优化 */
.permission-dialog .el-dialog {
  border-radius: 8px;
}

.permission-dialog .el-dialog__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 20px 16px;
  border-radius: 8px 8px 0 0;
}

.permission-dialog .el-dialog__title {
  color: white;
  font-weight: 600;
}

.permission-dialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
}

.permission-dialog .el-dialog__body {
  padding: 24px;
}

/* 表单优化 */
.el-form-item__label {
  font-weight: 500;
  color: #606266;
}

.el-input__inner,
.el-select .el-input__inner {
  border-radius: 4px;
  transition: all 0.3s ease;
}

.el-input__inner:focus,
.el-select .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* 按钮优化 */
.el-button {
  border-radius: 4px;
  transition: all 0.3s ease;
}

.el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.el-button--primary:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 标签优化 */
.el-tag {
  border-radius: 4px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .permission-management {
    padding: 10px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .header-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .search-form {
    flex-direction: column;
  }
  
  .search-form .el-form-item {
    width: 100%;
  }
  
  .table-toolbar {
    flex-direction: column;
    gap: 12px;
  }
  
  .custom-tree-node {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .tree-node-actions {
    flex-wrap: wrap;
  }
  
  .batch-content {
    flex-direction: column;
    gap: 12px;
  }
  
  .batch-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* 加载状态优化 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
}

/* 表格行悬停效果 */
.data-table .el-table__row:hover {
  background-color: #f8f9ff !important;
}

/* 空状态优化 */
.el-table__empty-block {
  background-color: #fafafa;
  border-radius: 4px;
}

/* 滚动条优化 */
.data-table::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.data-table::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.data-table::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.data-table::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>